<template>
  <div>
      <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 头部 -->
    <div>
    <el-row :gutter="20">
        <!-- 今年销售 -->
        <el-col :span="6">
            <div class="grid-content1 bg-purple1" style="display:flex">
                <div  style="width:50%;height:100%;padding:10px 0px 0px 20px">
                    <div  style="width:100%;height:50%;margin-top:10px;"><span style="color:#fff;font-size:20px">今年营销</span></div>
                    <div style="width:100%;height:40%;margin-top:40px;color:#fff;font-size:30px"><i class="el-icon-top"></i>{{amount_year}}</div>
                </div>
                <div  style="width:40%;height:100%;font-size:80px;margin-top:30px;padding-left:30px;color:#fff"><i class="el-icon-sell"></i></div>
            </div></el-col>
            <!-- 今月销售 -->
        <el-col :span="6">
            <div class="grid-content bg-purple" style="display:flex">
                <div  style="width:50%;height:100%;padding:10px 0px 0px 20px">
                    <div  style="width:100%;height:50%;margin-top:10px;"><span style="color:#fff;font-size:20px">今月营销</span></div>
                    <div  style="width:100%;height:40%;margin-top:40px;color:#fff;font-size:30px"><i class="el-icon-top"></i>{{amount_mounth}}</div>
                </div>
                <div  style="width:40%;height:100%;font-size:80px;margin-top:30px;padding-left:30px;color:#fff"><i class="el-icon-shopping-bag-1"></i></div>
                </div></el-col>
            
            <!-- 今日销售 -->
        <el-col :span="6">
            <div class="grid-content1 bg-purple1"  style="display:flex">
                 <div  style="width:50%;height:100%;padding:10px 0px 0px 20px">
                    <div  style="width:100%;height:50%;margin-top:10px;"><span style="color:#fff;font-size:20px">今日营销</span></div>
                    <div  style="width:100%;height:40%;margin-top:40px;color:#fff;font-size:30px"><i class="el-icon-top"></i>{{amount_day}}</div>
                </div>
                <div  style="width:40%;height:100%;font-size:80px;margin-top:30px;padding-left:30px;color:#fff"><i class="el-icon-box"></i></div>
                </div></el-col>
                <!-- 热销单品 -->
        <el-col :span="6">
            <div class="grid-content bg-purple" style="display:flex">
                <div  style="width:50%;height:100%;padding:10px 0px 0px 20px">
                    <div  style="width:100%;height:50%;margin-top:10px;"><span style="color:#fff;font-size:20px">热销单品</span></div>
                    <div  style="width:100%;height:40%;margin-top:40px;color:#fff;font-size:30px"><i class="el-icon-coin"></i>{{total_money}}</div>
                </div>
                <div  style="width:40%;height:100%;font-size:80px;margin-top:30px;padding-left:30px;color:#fff"><i class="el-icon-medal-1"></i></div>
                

                </div></el-col>
    </el-row>
    </div>
    <!-- 表格 -->
    <div style="margin-top:30px;font-size:20px">
   <el-table :header-cell-style="{background:'rgb(55,61,65)',color:'#fff','text-align':'center'}"

    :data="tableData"
    height="350"
    :cell-style="{'text-align':'center'}"

    style="width: 100%">
    <el-table-column
      prop="goods_name"
      label="药品名称"
      width="270">
    </el-table-column>
    <el-table-column
      prop="status"
      label="状态"
      width="270">
    </el-table-column>
    <el-table-column
      prop="entry_date"
      label="入库日期"
      width="270">
    </el-table-column>
     <el-table-column
      prop="ratings"
      label="评价"
      width="270">
      <i style="font-size:20px" class="el-icon-star-on"></i>
      <i style="font-size:20px" class="el-icon-star-on"></i>
      <i style="font-size:20px" class="el-icon-star-on"></i>
      <i style="font-size:20px" class="el-icon-star-on"></i>
      <i style="font-size:20px" class="el-icon-star-off"></i>

    </el-table-column>
     <el-table-column
      prop="price"
      label="价格"
      width="270">
    </el-table-column>
     <el-table-column
      prop="entry_date"
      label="销售总量">
    </el-table-column>
  </el-table>
</div>
    
  </div>
</template>

<script>
export default {
      name: "Home_index",
  data(){
    return{
        amount_year:10000,
        amount_mounth:3000,
        amount_day:10,
        total_money:8888,
        tableData:[{goods_name:'三九感冒颗粒',
        status:'正常',
        entry_date:'2022-6-7',
        ratings:'',
        price:30,
        entry_date:200},
        {goods_name:'正红花油',
        status:'报警',
        entry_date:'2022-6-7',
        ratings:'',
        price:20,
        entry_date:190},
         {goods_name:'风湿药',
        status:'正常',
        entry_date:'2022-6-8',
        ratings:'',
        price:50,
        entry_date:180},
        ],
    }
  },
  // 当home组件被创建出来时就应获取 左侧菜单
  created() {
    
  },
  methods:{
    
  }
}
</script>

<style type="text/css">

  
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: rgb(51,55,68);
  }
  .bg-purple {
    background: rgb(51,55,68);
  }
  .bg-purple1 {
    background: rgb(148, 151, 161);
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 10px;
    min-height: 150px;
  }
   .grid-content1 {
    border-radius: 10px;
    min-height: 150px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>